<script setup>
  import {getHomeDesign} from '@/api/login'
  import CVideo from '@/components/CVideo.vue'
  import useSettingStore from '@/store/modules/setting'
  import Footer from '@/layout/component/footer.vue'

  const router = useRouter()

  // 货币单位
  const currency = ref(useSettingStore().global.currencySymbol || '')
  const homeList = ref([])
  // 组件跳转
  function toRouter(item) {
    const {productId, groupId, redirectUrl} = item
    let query ={}
    let path = redirectUrl
    if(productId) path = `/product-detail/${productId}`
    if(groupId) {
      path = '/product-list'
      query = {
        groupId
      }
    }
    if(productId || groupId) {
      router.push({path, query})
    } else {
      window.open(path, '_self')
    }
  }
  // 首页配置
  function getHomeSetting() {
    getHomeDesign().then(r => {
      const {data} = r
      homeList.value = Object.keys(data).reduce((list, name) => {
        let config = data[name]
        // 分组商品展示4条商品
        if(name==='productGroupInfo') {
          config.forEach(it => {
            it.productDetail = it.productDetail.slice(0, 4)
          })
        }
        list.push({name, config})
        return list
      }, [])
    })
  }
  // 格式产品图
  function formatImg(imgs) {
    if(!imgs) return ''
    return imgs.split(',')[0]
  }

  getHomeSetting()
</script>

<template>
  <div class="p-home">
    <div class="comp-box" v-for="it in homeList" :key="it.name">
      <!-- banner -->
      <van-swipe
        v-if="it.name==='banners'"
        class="my-swipe"
        :autoplay="5000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="child in it.config"
          :key="child.id">
          <img alt="" :src="child.imageUrl" @click="toRouter(child)"/>
        </van-swipe-item>
      </van-swipe>
      <!-- 图文 -->
      <div class="img-text-box" v-if="it.name==='imageAndTexts'">
        <div class="img-text" v-for="child in it.config" :key="child.id">
          <img alt="" :src="child.resourceUrl"/>
          <div class="text-box">
            <p>{{child.title}}</p>
            <p>{{child.introduction}}</p>
            <van-button class="s-btn w-auto h32" @click="toRouter(child)">{{$t('layout.quickBuy')}}</van-button>
          </div>
        </div>
      </div>
      <!-- 视频 -->
      <div class="c-video-box" v-if="it.name==='videos'">
        <div class="c-video" v-for="child in it.config" :key="child.id">
          <div class="group-head">
            <p>{{child.title}}</p>
            <p>{{child.introduction}}</p>
            <p @click="toRouter(child)"><span>{{$t('layout.viewMore')}}</span></p>
          </div>
          <c-video :src="child.resourceUrl"/>
        </div>
      </div>
      <!-- 商品分组 -->
      <div class="com-group-box" v-if="it.name==='productGroupInfo'">
        <div class="com-group" v-for="child in it.config" :key="child.id">
          <div class="group-head">
            <p>{{child.name}}</p>
            <p>{{child.remark}}</p>
            <p><span @click="toRouter(child)">{{$t('layout.viewMore')}}</span></p>
          </div>
          <div class="group-list">
            <van-row :gutter="[9, 16]">
              <van-col
                span="12"
                class="l-item"
                v-for="pro in child.productDetail"
                :key="pro.productId"
                @click="toRouter(pro)"
              >
                <img :src="formatImg(pro.image)" alt=""/>
                <p class="c-name text-overflow">{{pro.productName}}</p>
                <p class="sub-name text-overflow">{{pro.introduce}}</p>
                <p class="price">
                  <span>{{currency}}{{pro.minPrice}}</span>
                  <!-- <span>{{currency}}{{pro.maxPrice}}</span> -->
                </p>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<style scoped lang="scss">
  .p-home {
    .comp-box {
      padding: 0 16px 30px;
    }
    .my-swipe  {
      img {
        height: 200px;
        width: 100%;
      }
    }
    .img-text-box {
      .img-text {
        margin-top: 24px;
        img {
          height: 228px;
          width: 100%;
          margin-bottom: 16px;
        }
        .text-box {
          text-align: center;
          p {
            font-size: 18px;
            margin-bottom: 4px;
            &:nth-child(2) {
              font-size: 12px;
              color: #939599;
              margin-bottom: 16px;
            }
          }
        }
      }
    }
    .c-video-box {
      .c-video {
        margin-top: 24px;
      }
    }
    .group-head {
      margin-top: 24px;
      p {
        font-size: 18px;
        text-align: center;
        margin-bottom: 4px;
        span {
          text-decoration: underline;
        }
        &:nth-child(2) {
          font-size: 12px;
          color: #939599;
        }
        &:nth-child(3) {
          font-size: 12px;
          margin-bottom: 16px;
        }
      }
    }
    .com-group {
      margin-top: 24px;
      .group-list {
        .l-item {
          border-radius: 4px;
          img {
            height: 190px;
            width: 100%;
            margin-bottom: 8px;
          }
          p {
            text-align: center;
          }
          .c-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
          }
          .sub-name {
            font-size: 12px;
            color: #939599;
            margin-bottom: 4px;
          }
          .price {
            font-weight: 600;
            font-size: 14px;
            span:first-child {
              font-weight: 600;
              font-size: 14px;
              color: #262626;
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
</style>